<template>
	<view class="outBox">
		<VideoBox>
			<template #content>
				<view class="content">
					<view class="userInfo">
						<image :src="userInfo.avatar" mode="scaleToFill"></image>
						<view class="info">
							<view class="name">
								<text>{{userInfo.nickName}}</text>
							</view>
							<!-- 	<view class="id">
                <text></text>
              </view> -->
						</view>
					</view>
					<view class="menus">
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/infomation')">
							<view class="left">

								<image :src="getImgUrl('/mine/icon1.png')" mode="widthFix"></image>
								<text>个人信息维护</text>
							</view>
							<view class="right">
								<image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
							</view>
						</view>
						<view class="menu"
							@click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/electronicAccount')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon6.png')" mode="widthFix"></image>
								<text>我的电子账户</text>
							</view>
							<view class="right">
								<image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
							</view>
						</view>
						<view class="menu"
							@click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/distribution/index')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon2.png')" mode="widthFix"></image>
								<text>我的收入</text>
							</view>
							<view class="right">
								<image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
							</view>
						</view>
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/storingWine')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon3.png')" mode="widthFix"></image>
								<text>我的存酒</text>
							</view>
							<view class="right">
								<image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
							</view>
						</view>
						<!-- 	<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/message')">
              <view class="left">
                <image :src="getImgUrl('/mine/icon4.png')" mode="widthFix"></image>
                <text>消息通知</text>
              </view>
              <view class="right">
                <image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
              </view>
            </view> -->
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/reservation/mine')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon5.png')" mode="widthFix"></image>
								<text>我的预约</text>
							</view>
							<view class="right">
								<image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
							</view>
						</view>
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/complaints/index')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon6.png')" mode="widthFix"></image>
								<text>投诉</text>
							</view>
							<view class="right">
								<image :src="getImgUrl('/mine/right.png')" mode="widthFix"></image>
							</view>
						</view>

				<!-- 		<view class="menu"
							@click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/cardCombination/applyPinka?btnType=2')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon6.png')" mode="widthFix"></image>
								<text>我申请的拼卡</text>
							</view>
							<view class="right">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view> -->
				<!-- 		<view class="menu"
							@click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/cardCombination/mine2')">
							<view class="left">
								<image :src="getImgUrl('/mine/icon6.png')" mode="widthFix"></image>
								<text>我的历史拼卡</text>
							</view>
							<view class="right">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view> -->
					<!-- 	<view class="menu" 	@click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/mine/cardCombination/initiated')">
							<view class="left">
								<image :src="baseImgUrl + '/mine/icon1.png'" mode="widthFix"></image>
								<text>拼卡管理</text>
							</view>
							<view class="right">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view> -->
					</view>
				</view>
			</template>
		</VideoBox>
		<Tabbar :currentTab="3"></Tabbar>
		<userLogin ref="userLoginRef" />
	</view>
</template>

<script>
	import Tabbar from '../../components/tabbar.vue';
	import Header from '../../components/header.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getWXStatusHeight,
		getImgUrl
	} from '@/utils/index.js'
	import VideoBox from "@/components/VideoBox/index.vue";

	export default {

		components: {
			VideoBox,
			Header,
			Tabbar,
		},
		computed: {
			...mapState('userStore', ['user']),
		},
		watch: {
			user: {
				handler(newVal, oldVal) {
					this.userInfo = newVal
				},
				deep: true // 启用深度监听
			}
		},
		data() {
			return {
				barHeight: 0, // 状态栏高度
				menuHeight: 0, // 状态栏高度
				userInfo: {}, // 用户信息
				baseImgUrl: this.$baseImgUrl,
				videoUrl: this.$videoUrl,
				userLoginRef: null,
				isCanPin: false, // 是否可以拼卡
			}
		},

		onLoad(option) {
			console.log("重新执行");
			let obj = getWXStatusHeight()
			this.barHeight = obj.barHeight
			this.menuHeight = obj.menuHeight
			this.userLoginRef = this.$refs.userLoginRef

			if (uni.getStorageSync("userInfo")) {
				this.userInfo = uni.getStorageSync("userInfo")
			}
		},
		methods: {
			getImgUrl,
		}
	}
</script>

<style lang="scss" scoped>
	.menus {
		margin-top: 52rpx;
		padding: 0rpx 52rpx;

		background: rgba(0, 0, 0, 0.41);
		border-radius: 86rpx;
		border: 2rpx solid #262a3c;
		backdrop-filter: blur(7px);
		margin-bottom: 200rpx;
		.menu {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #2C2E45;
			padding: 38rpx 0;

			&:last-child {
				border: none;
			}

			.left {
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					margin-right: 36rpx;
				}

				text {
					font-size: 28rpx;
					color: #fff;
				}
			}

			.right {
				image {
					width: 40rpx;
				}
			}
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.outBox {
		padding-bottom: 160rpx;
	}

	.bg {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		height: 100vh;
		width: 100vw;
		z-index: 2;
	}

	.content {
		flex: 1;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;


		.userInfo {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 100rpx;

			.info {
				.name {
					line-height: 42rpx;
					margin-top: 32rpx;

					text {
						font-weight: 600;
						font-size: 40rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}
				}

				.id {
					text {
						color: #B3B4C3;
						font-size: 28rpx;
					}
				}

			}

			image {
				width: 192rpx;
				height: 192rpx;
				border-radius: 85rpx;
				//border: 1rpx solid #fff;
			}
		}
	}
</style>